<template>
  <div class="search" tabindex="100" @focus="show = true" @blur="show = false">
    <span>
      <input
        v-model="value"
        @input="getsearch"
        @keyup.enter="search"
        @focus="show = true"
        @blur="show = false"
        placeholder="搜索音乐，歌手，歌词，用户"
      />
      <div v-if="!value">
        <img class="search-icon" src="../../assets/search.png" alt />
      </div>
      <div v-if="value">
        <router-link :to="`/serch/${value}`">
          <img class="search-icon" src="../../assets/search.png" alt />
        </router-link>
      </div>
    </span>
    <div class="search-list" v-if="show">
      <div>
        <div>
          <span>{{ title }}</span>
          <ul v-if="serachShow">
            <li
              v-for="(item, index) in hots"
              :key="index"
              @click.stop="wirteValue(item.first)"
            >
              {{ item.first }}
            </li>
          </ul>
          <ul v-if="!serachShow">
            <li
              v-for="(item, index) in searchsuggest"
              :key="index"
              @click.stop="wirteValue(item.name)"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
        <div class="history" v-if="serachShow">
          <span>搜索历史</span>
          <ul>
            <li
              v-for="(item, index) in history"
              :key="index"
              @click="wirteValue(item)"
            >
              {{ item }}
              <img
                @click.stop="clearHistory(index)"
                src="../../assets/del.png"
                alt
              />
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import store from "storejs";
export default {
  data() {
    return {
      hots: [],
      value: "", //搜索框value
      history: [], //历史纪录
      show: false, //显示搜索框
      searchsuggest: [], //搜索建议
      title: "热门搜索",
      serachShow: true,
    };
  },
  mounted() {
    this.gethots();
    this.history = store.get("history") ? store.get("history") : [];
  },
  methods: {
    gethots() {
      this.$api.gethotsongs().then((res) => (this.hots = res.hots));
    },
    clearHistory(index) {
      this.history.splice(index, 1);
      store.set("history", this.history);
    },
    search() {
      if (new Set(this.value).has(" ") || this.value === "") {
        return;
      }
      this.show = false;
      this.history.indexOf(this.value) > -1
        ? ""
        : this.history.push(this.value);
      this.$router.push("/serch/" + this.value);
      store.set("history", this.history);
    },
    wirteValue(value) {
      if (value != "暂无结果") {
        this.value = value;
        this.search();
      }
      //this.$router.replace("/serch/" + value);
    },
    getsearch() {
      if (new Set(this.value).has(" ") || this.value === "") {
        this.serachShow = true;
        this.title = "热门搜索";
      } else {
        this.$api.searchSuggest({ keywords: this.value }).then((res) => {
          let songs;

          if (res && res.songs) {
            songs = res.songs;
          } else {
            songs = [{ name: "暂无结果", id: 0 }];
          }
          this.searchsuggest = songs;
          this.title = "搜索建议";
          this.serachShow = false;
        });
      }
    },
  },
};
</script>
<style lang="less">
.search {
  outline: none;
  -webkit-app-region: none;
  span {
    display: flex;
    input {
      width: 220px;
      height: 24px;
      border-radius: 10px;
      border: none;
      outline: none;
      padding: 0 30px 0 10px;
      font-size: 12px;
      background: #a82828;
      color: white;
    }
    input::-webkit-input-placeholder {
      color: #c77373;
    }
    .search-icon {
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-left: -33px;
      cursor: pointer;
    }
  }
  .search-list {
    position: absolute;
    transition: all 0.6s;
    z-index: 9999;
    &::before {
      content: "";
      display: block;
      margin-left: 10px;
      width: 0px;
      border-bottom: 13px white solid;
      border-left: 15px transparent solid;
      border-right: 15px transparent solid;
    }
    > div {
      height: 400px;
      background-color: white;
      box-shadow: 0px 2px 4px rgb(225, 225, 226);
      border-radius: 5px;
      display: flex;
      transition: all 0.6s;
      span {
        font-size: 13px;
        color: #888;
        padding: 10px;
        border-bottom: 1px solid #e9e9e9;
        border-right: 1px solid #e9e9e9;
      }
      ul {
        list-style-type: none;
        border-right: 1px solid #e9e9e9;
        li {
          font-size: 13px;
          color: #000;
          padding: 8px 10px;
          &:hover {
            background-color: #ecedee;
            cursor: pointer;
          }
        }
      }
      .history {
        width: 164px;
        ul {
          height: 330px;
          overflow: hidden;
          li {
            display: flex;
            justify-content: space-between;
            img {
              display: none;
              width: 17px;
            }
            &:hover img {
              display: inline-block;
            }
          }
        }
      }
    }
  }
}
</style>
